<script setup lang="ts">
import type { OrderItemType } from "@/type/lidare"
import { useRouter } from "vue-router"
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from "pinia"
import { ref, onBeforeUpdate } from 'vue'
import { showToast } from "vant"
interface CheckboxRefsItemType extends Element {
  toggle(type?: boolean): (type?: boolean) => void,
  name: string
}
const router = useRouter();
const store = useCounterStore();
const { allPrice, selectList } = storeToRefs(store);
const checked = ref<Array<string>>([]);
const checkboxRefs = ref<Array<CheckboxRefsItemType>>([]);
let name = "";
let auto = false;
const toggle = (index: number) => {
  checkboxRefs.value[index].toggle();
  name = checkboxRefs.value[index].name;
};
const mapc = () => {
  if (auto) {
    auto = false;
    return;
  }
  checked.value = [name]
  auto = true;
}
onBeforeUpdate(() => {
  checkboxRefs.value = [];
});
const toPay = () => {
  if (checked.value.length <= 0) {
    showToast("请选择支付方式");
    return;
  } else {
    showToast("支付成功");
    changeAllListStatus();
    router.replace('/order');
  }
}

//处理订单
const counterStore = useCounterStore();
const { orderList, shopcartList } = storeToRefs(counterStore);
const { changeOrderList, changeShopCartList, changeShopCartAllItem } = counterStore;
const changeAllListStatus = () => {
  let list = shopcartList.value.filter(el => el.isSelect) as Array<OrderItemType>;
  list = list.map(el => {
    el.serialNumber = Date.now() + ""+Math.floor(Math.random() * 1000);
    el.orderCreateTime = Date.now() + "";
    el.orderStatus = 2;
    return el;
  });
  changeOrderList(list);
  changeShopCartAllItem(shopcartList.value.filter(el => !el.isSelect));
}
</script>
<template>
  <div class="fixed-zbest pay-detail">
    <div class="bgc"></div>
    <header class="header">
      <van-icon @click.stop="router.go(-1)" class="header-icon" name="arrow-left" />
      <div class="header-text">收银台</div>
    </header>
    <div class="content">
      <div class="allPrice"><span>&yen;</span>{{ allPrice }}</div>
      <div class="all-shop">
        <div class="left">共{{ selectList.length }}件</div>
        <div class="right">
          <div class="my-text" v-for="(item, index) in selectList" :key="index">{{ item.fullName }}</div>
        </div>
      </div>
      <div class="select-pay">
        <van-checkbox-group v-model="checked" @change="mapc">
          <van-cell-group inset>
            <div class="select-pay-item" @click.stop="toggle(0)">
              <div class="img-box">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25px"
                  height="25px">
                  <image x="0px" y="0px" width="25px" height="25px"
                    xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACOlBMVEX///+05vtSxvQbs/EOr/Acs/FWx/S55/q05vo2vPIFrO8Bqu8Aqu88vvO46Pty0PYPr/ADq+8Jre8MrvAHrO8RsPB60/ZUxvRSxfS+6vvj9v6K2PheyvVTxfRayPTU8fz+//+b3fkdtPFdyfVTxvQQr/ApuPIzu/Jx0PY3vPMktvEmt/GO2fjA6vvL7vzr+P7f9P1/1PcXsvEGrO8WsfAetPFrzvbY8vym4foUsfBeyfV80/eW3PjY8v3B6vuA1fdKw/RszvVuzvZ30fZ90/d00fae3/ng9f3a8/1uz/YNrvASsPAwuvKh4Pn8/v/I7PtKw/M1vPJ20faj4Pmy5fqr4/qY3flwz/Y5vfLR8Pya3fgXsvAas/GD1vfQ7/zX8v3Z8v3w+v7o9/666Pv4/f/V8fwCq+950ve76Pt70/YsufIuufI9v/NmzPWo4vrl9v7q+P7v+v79/v+45/tGwfMas/AXsfAgtfFAv/OE1vfu+f635/uC1fdDwPMTsPApuPGT2/hHwvMtufLz+/7j9v3W8fz6/f/X8vy+6fuP2vhQxfR10fZgyvUIrfCa3fnt+f7s+P6J1/is4/r7/v/b8/yw5foKre8itfFhyvXi9f2d3vn5/f4ot/HK7fy15vrF7Pve9P3s+f4JrfAhtfFJw/SL2Pj5/f9byPWP2fjB6/uU2/gyu/I/v/N40vfH7fwLrfAftPELrvBkzPVtz/aa3vkjtvEnt/Gf3/nk9v2F1vfm9/2t5PrC6/vm9/75mG/PAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+cDEgoNDbyt43gAAAGaSURBVCjPY2BgZGJmQQesbOwMDBycXNw86ICbi5ePgV8AxhUUEhaBKxIVYxCHcyQkpaSZ4bpkGGThRsjJKygqwXnKDCpAUlVNHQg05BkUNUEMLSG4jLaOLhDo6TMYgGhdQyO4jLGJKRCYmTNYaIIYloJwGR5TK2traxtbBjt7IO1gjLCHh1nC0dHRydnF1dHN3cOTG0mGy8sbAnx8/fwDEG7jCgwKDgkNC49g4ZGI9IuKhsvExMbFxyXoJyZ5JLsEp6Qqp8Fk0tIzMnmzsnNy8/JTCgqLiku8YDKlwRplQGcKspRXVCYwKFTJV9fU1oFl6hsaoUHX5Nvc0trM0FbQ3tHZ1c2gohTc0wuR6OufMDFCeVI/A8PkqvYpDCrGsVN7mI2nTZ/B0T+zUitNWFt81kwGBr/ZQLfNaZhrN696/oKFHTOYQe5atHjJUvllIBlBreUrOFbyrepZDYtEY+Y1a9cxMAFZ65Wa1LM3bESKdUHLIIZNQjzYwLTNDFu2YpXZtp1hx04fTF3T1KV3MTDssJuUhw5279nLAABJrXtkeNS8cQAAAABJRU5ErkJggg==" />
                </svg>
              </div>
              <div class="text">支付宝</div>
              <van-checkbox name="alipay" :ref="el => checkboxRefs[0] = (el as CheckboxRefsItemType)" />
            </div>
            <div class="select-pay-item" @click.stop="toggle(1)">
              <div class="img-box">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25px"
                  height="25px">
                  <image x="0px" y="0px" width="25px" height="25px"
                    xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH5wMSChIDlk/A4QAABMJJREFUSMellslvHEUUxn9VXd3TM+MZz4ztJF6ykMSJnT1wIASJCAFCkZA4IE6I/wDxh3DmxhWJAwe4IBE4gARCLCGKHVmBrMYeO47tiZ32tHt6qSoO7eAltqOIklqq1131vlfv+96rFtZay3MOY6EVG+YiC1h6CpJGQeA7Ytv16nkBADJruR1ofnmYYbAMlCTHqg5Hqg71gkT+XxBjQVsoKUG9ALOhZWIpo9nWzEWK8z0ug+XNQOJ50hUklqlQsxwbSkrgCMHMquZuoJmLNCAYqSku9XsMlSRSbAFJDSTGogR4UiC2Se9YK+VKM6YZGvaWJG8PFThTV9xb0fw0l3BzOcMRcLrh8sZAgcGyXE9XO7XcCTLmVjVdrmC05tLjb86sXXukACksUWaIMovrCI52K1ZSy0yomVvVjLUSSg5cPuBTViIHmVhKuTLdYSbUdLkS/6ikx5cEiaEZaqLMsqfoMFiSvLrXY3JF01eUjNQUAnCAshL4ElJjWI4FE0sph6uKF3td1Epq+H0+5n6Qoa2l4gmkyKOebmu+moyYamecqLmc7XEZKitGa4ouV+LIfN2qtkyupDTDjFTnZ55esdxoJZxqKNSt5YxmOyPKDErC6brLUNlBAL4SdLuCTFt+fRgzthjzQtXlRN1lb8mhpHLuZkPNbw9jFiPNEyoTbWm2M2ZDjZpuZyzFhtRY+ooOZ3pc9hRzPg5WFK8P+hhrGW8lBIllrJUw3koQQJcnEMDjxG5hTwCW2TDj1nKKWog0QaxJteVItUDfBsKVgFMNl6onaPiSq/MxD0JNR+dO42gnseffl2PDfKRR86sZQWIAGChJagX51JYDXYr3DpcYriquTEeMLyaEWe5IbHK72W6jCRKD0hZSbRAC6gWHsiu3ja2kJBf2+VQ8ibGWP+djomz3OrZW5FwLAdpajIFEG7S1+csdxsmGxzsHS7QizXgr2RVEybywZcUVOGtqaHXMM6MDONHwONnwsNaSaEOqLanO5xttJaDiClTNkzgC4szw91LMwqpPpVvuClJUkr5iLuHFyGxgZDPxrnSoehJ5trdAb9EhNZZr8zE3lxJi/YxcQ97brCXVufxTszbfYPcVJScbHnK04TFUVoDlfpDwzf02E48SUrMzkLWWTmYIU0Ni7Hq6jP3PlsBQWXGw6qJ8R3Cx3+f6Qoc7ywk/NFepuBJxvMKxmkdJyU0d2VhotjOuz3d4EGZbBLwmY2EZqRd4baCI76w1yLcOlBlbjJlpJzxONF/cCrgXJLw/XOVcb4EuT1Jw8up+1DF8eTvg+6mQVJu1wlhrdlgQUCs4vLzP55X+Yg765D6ZDFI+udri23/arK4pzHcEwzWP43WPoYqLsXBtvsP4QocgNeuRbzhLWQkuH+ri4/MNjtW8zSCQO/h0bIkfmyErieEJLUKAkgJrIduBKymh4kre3F/mo3N1zvT660FsvX4fhBmf3Vji67ttZsKUTmbYTWsCga8E+7sU7x6p8OFoN4eq3uY1293xUWb4eSbi87+W+WMu4lEnb4qpsRgLjgDXEfiOpOE7XOgv8sFINxf7S/jq6W6x649ElBkmWjHfTba5ttBhKkgJEkOtIBmue7y0p8iloTIjjQJFtXMr+he223v1QjOqHQAAAABJRU5ErkJggg==" />
                </svg>
              </div>
              <div class="text">花呗分期<span class="span-text">支持3/6/9期分期支付</span></div>
              <van-checkbox name="surname" :ref="el => checkboxRefs[1] = (el as CheckboxRefsItemType)" />
            </div>
            <div class="select-pay-item" @click.stop="toggle(2)">
              <div class="img-box">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25px"
                  height="24px">
                  <image x="0px" y="0px" width="25px" height="24px"
                    xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAYCAMAAAA4a6b0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACAVBMVEX////+//78/vz7/fvp9ui/5r6S1JBzx3FiwWBbvllow2V4yXaO0oy/5b7w+fDb8dqT1JFfv11NuEpEtUE+sjs6sTc5sDY7sTg/szxDtEBNuEtiwF+W1ZTd8t2r3allwmJFtUI4sDVnwmW14bT6/frr9+qQ045OuUs8sTk8sjlSulCZ1pfs9+uR049ItkZTu1Cb15rh8+Gy4LBWvFQ9sjpXvFSS1JHQ7M/i8+HN68zP7M56ynhiwV+k26PT7tLq9unc8dtgwF2CzYDm9ea34rZXvFVHtkRBsz5wxm+14bPr9+uw4K9rxGhItkVZvVe547iV1ZNdv1ql26OJ0IdKt0eBzX+85Lzf8t/2+/X1+/XG6MR/zH5Quk6W1ZWAzH6q3ams3qvD58Lk9OT4/Phev1xBtD+Fz4N/zH3a8Nny+vLg8t/o9ujs9+yv365txWpJt0aAzX6Q04+14rT0+/SAzH9Suk+U1ZOq3ajk9OPZ8NhTu1Gv361ow2ZRuk+P0o6b15luxWz5/fme2JxMuEmj2qF+zH1CtECDzoLj9OL9/v3V7tVCtD9+zHzX79fT7tODzoFPuU2Q0o5MuEqw36+f2J1Lt0iL0Yl5yXdUu1FgwF59y3uc2Jq65Lnb8Nr0+vT+/v6Z1ph2yHSr3qrl9eTH6ce+5b3I6cfc8dzW79XU7tPz+vPA14RnAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+cDEgoTNDfpVK8AAAF1SURBVCjPY2CAAUYmZmZmJkYGdMDCysbOwcnFzcPLhyLOLyAoJCwiKiYuISklLSMLF+eTk1cQVYQBUQUlZRWIhKqauoYiMtDU0tYB69DVE1NEBfoGhiAZI2NUCRNTM3MLSyugWdYmyOIiNrZ29g4yjk7ODC6uQL6CG0Ta3cPTgc/L28dX1M+fIcANKBIYFKwnJhYSGhYeERkVHaMJVBvLEAekFIXjwxOs1RKTkhkcZFJSQbo10hjSQTKK1hmZWdkqDDm5efkQn4kVMBQKgxhCRcwMDMWJJaWaUJcIlzGUx4AY4sEVDJUyjqlwN1ZVM2TUgFm1dfUN+YggUmxwYGhsagaHVn6+JpK31FsaGRgMW1MV0UFbewcwdDq7rLvRJXp6O0EB19nX74siMWEiRIKBoTFeC+gBWLhOsp6cBJVgYJ4ydSr3tOmCM2bMmDlr9py58+BxOn/BwkWViyuX8C7lXbacjwk5GaxYuQqUeDqZOjGTDhYAAKFoZzhdYo6tAAAAAElFTkSuQmCC" />
                </svg>
              </div>
              <div class="text">微信支付</div>
              <van-checkbox name="weixin" :ref="el => checkboxRefs[2] = (el as CheckboxRefsItemType)" />
            </div>
            <div class="select-pay-item" @click.stop="toggle(3)">
              <div class="img-box">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25px"
                  height="24px">
                  <image x="0px" y="0px" width="25px" height="24px"
                    xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAYCAYAAAAPtVbGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH5wMSChUilWdGeAAAA7dJREFUSMeVlstP3FUUxz/n92BghikzUFCS0mppQy2JbS0lXdAmbowrtboysSb+abpwqY2LLipJIw1Fg4+SSk2rFUhBGJjhMVBmfq97XPxmhmHmB9aT3NzXued7nvdeUVWllXZ2YaUAfgB9eejPQ2eqjQ3PRwslWC9CRwcyNAj5E21szqFZxYP1Evz8GH0wG49HzyM3rsHIWejrAceBMEKLm/B0AZ2cgV/nYaAX3r0OE1eR105CpqshVlRVCUIobqLPFpHvp2FpGVTjZhQcBx1/G5kYg3wPurWD3v8RefgI8YIGn6qiw0PI+zfg0kgM1uEiGoTKSgH95h7y+1MIDw41+nrLZdFsBjZ3kO1dUA7z1cEswVy9iHz+IdbwaRy2yjAzh6wUIN0FgQ2VKojGQho2A1tlZHMHTH2hJZwK6tioiTDzf8LkNHSncah66OxjZLUEo8NQrcBOOY5PpQpELUi0C0fRDge1hMh1CLwKwcIC1g+QGh6qBd4SdHUjzqiBPLxzEQ18pFBE9qtQrULUnoQAqgY1hiiXIUyn8J8vYgrFWA3PBz+og9ggsZZaKMHdKejPo5dG0CBAVjcQ3wcvgMiAgDoOKhBu7hEGPuHSHuHWdmyr1oyuyXQaTpCDPQVYL6H3piGXhQtvoo4DpW3ED9AgIMqm8T2PoPIS83L/UFysmjst20ZcNwbRg/2G1xu0VcY8fATdaWRsFDM0SDD3BG9uHlP12t0nECGIgpNJY/Xl68UYZ1IbQDPt7qFP/iJaWib4Zy0RoA3M9zH7FRxSHZDNQDqF7lchNC35o42ZrhVBIyQKkhK4KQkF6Uxh9fdineiuVfx2Ge4+iK+I5TXU8yCK0FrVx71p9MYYfBMS1tea5bsuVm8P7s1xUp/dwj5zqgZS1/nFGnw7iU7NxtdMECaC1MFDExGqIVJFbcHKpHGujNL56QfY1y4jthUDJ93Cev8n9Ks76LPFY0FUTQymBnPqdVK3P8a99R7iuofkWYk+Pf8GDA7U8vwgJoc1aRIiFu5b57CvX24DOBpEANsCS2oTSeZpHodRXKwJlAxyZNq08OirHTnakv+iFgOPO+IcuVN/Q46LSfOWbcev5itbku6CM4Pxc2tZjYuu1RIRAdvC6s1hnx3C6sslG534kagr+8dz9Ms7mJnf4k+DGkBRE6curoN1cxz7i0+QC8NHe/Y4EACqHmZqFvP1d7C9Cyfz6NoG9OWwb3+ENTGW/JP5XyAQF952Gf1lHv5+AedOI1dGkVw22ZUt9C98hBJSldFJ2AAAAABJRU5ErkJggg==" />
                </svg>
              </div>
              <div class="text">
                <div>组合支付<span class="span-tag">使用教程</span></div>
                <div class="text-footer">买手机钱不够?支付宝+微信+钱包</div>
              </div>
              <van-checkbox name="combination" :ref="el => checkboxRefs[3] = (el as CheckboxRefsItemType)" />
            </div>
          </van-cell-group>
        </van-checkbox-group>
      </div>
    </div>
    <footer class="footer">
      <div class="btn" @click.stop="toPay">支付 &yen;{{ allPrice }}</div>
    </footer>
  </div>
</template>
<style lang="scss" scoped>
.pay-detail {
  position: relative;
  width: 100%;
  background-color: var(--bgc-gray);
  overflow: scroll;
  box-sizing: border-box;
  padding-bottom: .5rem;
  color: var(--text-white);

  &::-webkit-scrollbar {
    display: none;
  }

  .bgc {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3.5rem;
    background-image: linear-gradient(to bottom, rgba(245, 41, 66, 1) 20%, rgba(245, 41, 66, 1), rgba(245, 41, 66, 0));
  }

  .header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: .5rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 .15rem;
    color: var(--text-white);

    .header-icon {
      font-size: .2rem;
      opacity: .9;
    }

    .header-text {
      flex-grow: 1;
      text-align: center;
      font-weight: bold;
      opacity: .9;
    }
  }

  .content {
    position: relative;
    z-index: 10;

    .allPrice {
      margin-top: .3rem;
      text-align: center;
      font-size: .2rem;
      font-weight: bold;
      font-style: italic;
      opacity: .9;

      >span {
        font-size: .16rem;
        margin-right: .05rem;
      }
    }

    .all-shop {
      width: 2.6rem;
      margin: 0 auto;
      display: flex;
      font-size: .12rem;
      opacity: .9;

      .left {
        min-width: .4rem;
      }

      .right {
        flex-grow: 1;
      }
    }

    .select-pay {
      width: 3.5rem;
      height: 2.1rem;
      border-radius: .1rem;
      margin: 0 auto;
      margin-top: .1rem;
      background-color: var(--bgc-white);
      box-sizing: border-box;
      padding: .2rem .1rem;

      .select-pay-item {
        width: 100%;
        height: .4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--bgc-black);

        .img-box {
          min-width: .25rem;
          width: .25rem;
          height: .25rem;

          >svg {
            width: 100%;
            height: 100%;
          }
        }

        .text {
          flex-grow: 1;
          margin: 0 .1rem;
          font-size: .14rem;

          .span-text {
            font-size: .12rem;
            color: var(--text-gray);
            margin-left: .05rem;
          }

          .span-tag {
            background-color: var(--bgc-red);
            color: var(--text-white);
            box-sizing: border-box;
            padding: 0 .02rem;
            border-radius: .02rem;
          }

          .text-footer {
            color: var(--text-gray);
            font-size: .12rem;
          }
        }
      }
    }
  }

  .footer {
    width: 100%;
    height: .5rem;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0 .1rem;
    box-sizing: border-box;

    .btn {
      background-color: var(--bgc-red);
      color: var(--text-white);
      font-size: .18rem;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: .45rem;
      border-radius: .06rem;
    }
  }
}
</style>